<template>
  <div class="app-container calendar-list-container">
      <div class="filter-container">
        <el-select
            clearable
            filterable
            v-model="listQuery.workCenter"
            style="width: 160px;margin-right:15px;"
            class="filter-item"
            @focus="getCenterList"
            placeholder="请选择工作中心">
                    <el-option
                    :value="item"
                    :label="item"
                    v-for="(item,index) in this.centerList"
                    :key="index"/>
            </el-select>
            <el-input
                @keyup.enter.native="getData"
                clearable
                v-model="listQuery.clientNumber"
                style="width: 130px;margin-right:15px;"
                class="filter-item"
                placeholder="请输入客户品号"
            ></el-input>
            <el-input
                @keyup.enter.native="getData"
                clearable
                v-model="listQuery.produceNo"
                style="width: 130px;margin-right:15px;"
                class="filter-item"
                placeholder="请输入产品编号"
            ></el-input>    
            <el-input
                @keyup.enter.native="getData"
                clearable
                v-model="listQuery.issueIndexes"
                style="width: 130px;margin-right:15px;"
                class="filter-item"
                placeholder="请输入问题索引"
            ></el-input>
            <!-- style="width: 150px;margin-right:15px;" -->
            <el-input 
                clearable 
                filterable
                @keyup.enter.native="getData" 
                v-model="listQuery.responsibility" 
                style="width: 130px;margin-right: 15px"
                class="filter-item" 
                placeholder="请输入责任定位" >
            </el-input>
            <el-select
            clearable
            v-model="listQuery.type"
            style="width: 130px;margin-right:15px;"
            class="filter-item"
            placeholder="请选择责任单位">
                    <el-option
                    :value="item"
                    :label="item"
                    v-for="(item,index) in this.centerLists"
                    :key="index"/>
            </el-select>
            <el-input 
                clearable 
                @keyup.enter.native="getData" 
                v-model="listQuery.disqualificationType" 
                style="width: 130px;margin-right:15px;" 
                class="filter-item" 
                placeholder="请输入检验环节" >
            </el-input>
            <el-select 
               v-model="listQuery.scanUserName" 
               clearable
               filterable
               @focus="focusName"
               @change="changeNumber"
               style="width: 130px;margin-right:15px;" 
               class="filter-item"
               placeholder="请选择责任人">
               <el-option :value="item.userName" :label="item.userName" v-for="(item,index) in this.nameList" :key="index"/>
           </el-select>

            <el-date-picker
            v-model="listQuery.startTime"
            value-format="timestamp"
            format="yyyy-MM-dd"
            placeholder="选择开始日期"
            style="width: 150px;margin-right:15px;" class="filter-item"
            >
            </el-date-picker>
            <el-date-picker
            v-model="listQuery.endTime"
            format="yyyy-MM-dd"
            value-format="timestamp"
            placeholder="选择结束日期"
            style="width: 150px;margin-right:15px;" class="filter-item"
            ></el-date-picker>
            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
      </div>

          <!-- table 表格 -->
    <el-table  :data="qualityList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%">
      <el-table-column  label="序号" type="index" align="center" width="80px"/>
      <el-table-column label="工作中心"  prop="workCenter" width="100"  align="center"/>
      <el-table-column label="报检线体"  prop="sectionAbbreviation"   align="center"/>
      <el-table-column label="客户品号"  prop="clientNumber"   align="center"/>
      <el-table-column label="产品号"  prop="produceNo"   align="center"/>
      <el-table-column label="产品条码"  prop="deviceBarcode"  align="center" width="120px"/>
      <el-table-column label="问题描述"  prop="disqualificationDesc"   align="center"/>
      <el-table-column label="责任定位"  prop="responsibility"   align="center"/>
      <el-table-column label="责任单位"  prop="type"   align="center">
        <template slot-scope="scope">
            <div class="fx">
              {{
                scope.row.type == '0'
                ? "装配车间": 
                scope.row.type == '1'
                ? "数控车间":
                scope.row.type == '2'
                ? "焊接": 
                scope.row.type == '3'
                ? "喷涂": 
                scope.row.type == '4'
                ? "物料": 
                scope.row.type == '5'
                ? "供应商":
                scope.row.type == '6'
                ? "EMS总装车间": ""
              }}
            </div>
          </template>
      </el-table-column>
      <el-table-column label="排产编号"  prop="planNo"   align="center"/>
      <el-table-column  label="问题性质" prop='natureName' align="center" width="100px"/>
      <el-table-column  label="问题大类" prop='issueLarge' align="center"/>
      <el-table-column  label="问题小类" prop='issueLittle' align="center"/>
      <el-table-column  label="缺陷代码" prop='issueId' align="center"/>
      <el-table-column  label="问题索引" prop='issueIndexes' align="center"/>
      <el-table-column label="检验环节" prop="disqualificationType" align="center"/>
      <!-- <el-table-column label="质检角色" prop='disqualificationType'  align="center"/> -->
      <el-table-column  label="质检人员" prop='checkJobNumber' align="center" width="100px"/>
      <el-table-column  label="负责人" prop='scanUserName' align="center" width="100px"/>
      <el-table-column  label="检验日期" prop='createTime' align="center" width="100px"/>
      <!-- 对员工数据进行编辑与删除操作 -->
      <el-table-column  label="详情" align="center" width="120px" v-if="userInfo.roleId == '0' || userInfo.roleId == '14' || userInfo.roleId == '23' || userInfo.roleId == '24'">
        <template slot-scope="scope" >
              <el-button size="mini" type="primary" @click="details(scope.row)">查询详情</el-button>
        </template>
      </el-table-column>
    </el-table>

       <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-divider></el-divider>

    <el-button type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>
  </div>
</template>

<script>
import { getDisqualificationPage } from '@/api/qualityQuery'
import { findUserListGroup } from '@/api/chargingData.js'
import mixin from '@/utils/mixin.js'
export default {
    name: 'queryHomePage',
    mixins:[mixin],
    data() {
        return {
            listQuery: {            //查询信息存放表单
                produceNo: '',      //产品编号
                clientNumber:'',    //客户品号
                startTime: '',      //开始时间 
                sectionAbbreviation: '',      //工段编号
                endTime: '',        //结束时间
                page: 1,            //页码
                limit: 10,          //每页多少条记录
                planNo: '',         //排产编号
                checkJobNumber: '', //质检人员的工号
                disqualificationType: ''    //类型 0QC检 1FC检 2EC检
            },
            total: '',
            qualityList: '',        //后台返回的查询信息
            roleList: [{            //角色类型选择列表
                value: '0',
                label: 'QC检'
            },{
                value: '1',
                label: 'FC检'
            },{
                value: '2',
                label: 'EC检'
            },{
                value: '3',
                label: '试水检验'
            }],
            centerLists: ['装配车间','数控车间','焊接','喷涂','物料','供应商','EMS总装车间'],
            userInfo: this.$store.state.user.userInfo
        }
    },
    computed: {
      inputWid() {
        return function (value) {
            if(!value || (value.length <= 10)){
              return '150px'
            } else {
              return (150 + (String(value).length-10)*6) + 'px'
            }
        }
      }
    },
    methods: {
        async focusName(){
            let query = {page:1,limit:9999,status: 1}
            const {data} = await findUserListGroup(query)
            console.log(data)
            this.nameList = data
        },
        // 责任人发生改变
        changeNumber(e){
            if(!e) this.listQuery.scanJobNumber = ''
            this.nameList.forEach(item => {
                if(item.userName == e) {
                    this.listQuery.scanJobNumber = item.jobNumber
                }
            })
        },
        transformDat(res) {
            // console.log('%c导出质量系数excel数据:','color:green;font-size:16px;')
            // console.log(res)
            const mapInfo = {
                index: '序号',
                createTime: '检验时间',
                scanTime: '员工扫码时间',
                userName: '检验员',
                workCenter: '工作中心',
                checkJobNumber: '质检人员',
                scanUserName: '责任人姓名',
                scanJobNumber: '责任人工号',
                stationIdentifying: '责任工位',
                type: '责任单位',
                upProcess: '责任工序',
                sectionAbbreviation: '报检线体',
                clientNumber: '客户品号',
                planNo: '排产编号',
                produceNo: '产品号',
                produceName: '产品名',
                deviceBarcode: '产品条码',
                specification: '规格',
                disqualificationType: '检验环节',
                processName: '工序名称',
                natureName: '问题性质',
                issueLittle: '问题小类',
                issueLarge: '问题大类',
                issueIndexes: '问题索引',
                responsibility: '责任定位',
                issueId: '缺陷代码',
                natureCoefficient: '扣除品质系数',
                disqualificationDesc: '问题描述',
                imageUrl: '质量问题图片',
                videoUrl: '质量问题视频',
            }
            // 对data进行格式化
            // 取出所有的属性名
            const props = Object.keys(res[0]) // ['id','']
            console.log(props)
            // 将属性名从英文转为中文
            const header = props.map(zhkey => mapInfo[zhkey])
            console.log('中文的表头', header)
            // const data=[['xxxx','总裁办'，'13800000']]
            const data = res.map(obj => Object.values(obj))
            console.log(data)
            return { header, data }
        },
        // 导出excel
        async hExportExcel() {
        let query = Object.assign({},this.listQuery)
        query.page = 1
        query.limit = 10000
        console.log('%c导出excel传的参数query:','color:green;font-size:16px;')
        console.log(query)

        let arr = await getDisqualificationPage(query)
        const { header, data } = this.transformDat(this.setSort(arr.data.records))
            import('@/vendor/Export2Excel').then(excel => {
            // excel表示导入的模块对象
            console.log(excel)
            excel.export_json_to_excel({
            header, // 表头 必填
            data, // 具体数据 必填
            filename: '质量问题excel', // 文件名称
            autoWidth: true, // 宽度是否自适应
            bookType: 'xlsx' // 生成的文件类型
            })
        })
        },
        // 排序函数
        setSort(arr){
            let newArr = JSON.parse(JSON.stringify(arr))
            let arr1 = []
            newArr.forEach((item,index)=>{
                let obj = {
                    index: index+1,
                    createTime: item.createTime,
                    scanTime: item.scanTime,
                    userName: item.userName,
                    checkJobNumber: item.checkJobNumber,
                    workCenter: item.workCenter,
                    scanUserName: item.scanUserName,
                    scanJobNumber: item.scanJobNumber,
                    stationIdentifying: item.stationIdentifying,
                    type: item.type == '0'?'装配车间':
                        item.type == '1'?'数控车间':
                        item.type == '2'?'焊接':
                        item.type == '3'?'喷涂':
                        item.type == '4'?'物料':
                        item.type == '5'?'供应商':'',
                    upProcess: item.upProcess,
                    sectionAbbreviation: item.sectionAbbreviation,
                    clientNumber: item.clientNumber,
                    planNo: item.planNo,
                    produceNo: item.produceNo,
                    produceName: item.produceName,
                    specification: item.specification,
                    disqualificationType: item.disqualificationType == 0 
                                          ? 'QC' : item.disqualificationType == 1 
                                          ? 'FC' : item.disqualificationType == 5
                                          ? 'OQC' : item.disqualificationType == 2
                                          ? 'EC' : '试水检验',
                    processName: item.processName,
                    deviceBarcode: item.deviceBarcode,
                    natureName: item.natureName,
                    issueLittle: item.issueLittle,
                    issueLarge: item.issueLarge,
                    issueIndexes: item.issueIndexes,
                    responsibility: item.responsibility,
                    issueId: item.issueId,
                    natureCoefficient: item.natureCoefficient,
                    disqualificationDesc: item.disqualificationDesc,
                    imageUrl: item.imageUrl,
                    videoUrl: item.videoUrl
                }
                arr1.push(obj)
            })
            return arr1
        },
        
        // 搜索按钮绑定的函数
        // for循环对disqualificationType数据进行遍历，将数字转化为对应的职位字母
        async searchBtn() {
            const query = Object.assign({},this.listQuery)
            if(this.listQuery.type) {
                query.type = this.listQuery.type == '装配车间'?'0':
                             this.listQuery.type == '数控车间'?'1':
                             this.listQuery.type == '焊接'?'2':
                             this.listQuery.type == '喷涂'?'3':
                             this.listQuery.type == '物料'?'4':
                             this.listQuery.type == '供应商'?'5':
                             this.listQuery.type == 'EMS总装车间'?'6':''
            }
            delete query.scanUserName
            const {data} = await getDisqualificationPage(query)
            this.qualityList = data.records
            this.total = data.total
            for(let i = 0; i < this.qualityList.length; i++) {
                this.qualityList[i].disqualificationType = this.qualityList[i].disqualificationType == 0 
                                                           ? 'FQC' : this.qualityList[i].disqualificationType == 1 
                                                           ? 'FC' : this.qualityList[i].disqualificationType == 2
                                                           ? 'EC' : this.qualityList[i].disqualificationType == 3
                                                           ? 'OQC' : this.qualityList[i].disqualificationType == 5
                                                           ? '试水检验': '-'
            }
        },
        // 查看详情的按钮绑定的函数，将数据传递到目标页面
        // item为对应的整行数据
        details(item) {
            this.$router.push({
                path: 'qualityDetail',
                name: 'qualityDetail',
                params: ''
            })
            //     params: item
            this.$store.commit('ADD_disqualificationId',item.disqualificationId)
        },
        getData() {
            this.listQuery.page = 1
            this.listQuery.limit = 10
            this.searchBtn()
        }, 
        // 改变列表单页显示信息的条数
        handleSizeChange(val) {
            this.listQuery.limit = val
            this.searchBtn()
        },
        // 改变列表页码
        handleCurrentChange(val) {
            this.listQuery.page = val
            this.searchBtn()
        } 
    },
    // 进入页面即调取数据
    mounted() {
        this.searchBtn()
    }
}
</script>

<style>
</style>